// 需求:给Detail视图对应的路由配置路由参数,键为pages,值请在路径后面/加上参数的值
// 流程1:针对要使用路由参数的路由,在定义路由里面,定义路由参数
// 2:在路由对应的组件(视图)里面,通过props.match.params拿到路由参数的值
import React from 'react';
import { Route } from 'react-router-dom';
import { withRouter, Switch, NavLink, Redirect } from 'react-router-dom';
import Home from './components/Home';
import Detail from './components/Detail';
import XXX from './components/xxx';

function App(props) {
  console.log(props); /* 官方的组件withRouter,默认的往子组件里面的props添加了一个对象 */
  /* 所以可以在App组件里面使用对象里面的history里的方法来切换视图 */
  return (
    <div>
      App {<h3> &nbsp; 链接: </h3>}
      <NavLink to="/Home">链接:Home</NavLink>
      <> &nbsp; &nbsp;&nbsp;</>
      {/* 用转义符隔开一下,好看点 */}
      <NavLink to="/Detail">链接:Detail</NavLink>
      <> &nbsp;&nbsp;&nbsp; </>
      <NavLink to="/XXX">链接:XXX</NavLink>
      <hr />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      {/* 如下定义路由规则 */}
      {/* <Switch> */}
      {/* <Redirect from="/" to="/XXX" exact></Redirect> */}
      <Route path="/XXX" component={XXX}></Route>
      <Route path="/Home" component={Home}></Route>
      {/* 在定义路由里面,定义路由参数 */}
      <Route path="/Detail/:page?" component={Detail}></Route>
      {/* 路由参数,加上? 表示可有可无,不加? 表示路径后面必须带上参数,而pages是参数的键,值被解析成字符串 */}
      {/* </Switch> */}
    </div>
  );
}

const withApp = withRouter(App);
export default withApp;
